<template>
  <div class="car-detial"  v-loading="loading">
    <div class="car-info-panel">
			<div class="car-info-title">销售信息</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="销售类型：">
            {{res.salePayType | filterSaleType}}
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="成交日期：">
            {{res.saleDealDate | filterDateForDay}}
          </el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="销售员工：">
            {{res.user.userName || '--'}}
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="成交价格：">
            {{res.salePrice || '--'}} 万
					</el-form-item>
				</el-col>

				<el-col :sm="24" :md="24" :lg="24" :xl="24" >
					<el-form-item label="备注：">
            {{res.saleRemark || '--'}}
					</el-form-item>
				</el-col>
			</el-form>
		</div>
    <div class="car-info-panel">
			<div class="car-info-title">付款类型</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="付款类型：">
            {{res.salePayType | filterSalePayType}}
					</el-form-item>
				</el-col>
        <div v-if="res.salePayType == 1">
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="定金：">
              {{res.saleDeposit || '--'}}
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="余款：">
              {{res.saleBalance || '--'}}
            </el-form-item>
          </el-col>
        </div>
        <div v-else>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="按揭公司：">
              {{res.saleMortgageName || '--'}}
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="首付款：">
              {{res.saleFirstPayment || '--'}}
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="贷款额度：">
              {{res.saleLoanLimit || '--'}}
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="按揭周期：">
              {{res.saleMortgageCycle || '--'}}
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="按揭费用：">
              {{res.saleMortgagePrice || '--'}}
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="押金：">
              {{res.saleMortgagePrice || '--'}}
            </el-form-item>
          </el-col>
        </div>
			</el-form>
		</div>
    <div class="car-info-panel">
			<div class="car-info-title">相关费用</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="过户费用：">
            {{res.saleMortgagePrice || '--'}}
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="佣金：">
            {{res.saleCommission || '--'}}
          </el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="开票费用：">
            {{res.saleBillPrice || '--'}}
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="其他费用：">
            {{res.saleOtherPrice || '--'}}
					</el-form-item>
				</el-col>
			</el-form>
		</div>
    <div class="car-info-panel">
			<div class="car-info-title">客户来源</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="客户来源：">
            {{channelName || '--'}}
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="归属地：">
            {{res.city.cityName}} {{res.province.provinceName}}
          </el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="证件号：">
            {{res.saleBuyerCardNo || '--'}}
					</el-form-item>
				</el-col>
			</el-form>
		</div>
    <div class="car-info-panel">
			<div class="car-info-title">是否代办保险</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="是否代办保险：">
            {{res.saleInsuranceState | filterSaleInsuranceState}}
					</el-form-item>
				</el-col>				
        <div v-if="res.saleInsuranceState">
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="保险公司：">
              {{res.saleInsuranceCompany || '--'}}
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="商业险：">
              {{res.saleBusinessInsurPrice || '--'}}
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="交强险：">
              {{res.saleForceInsurPrice || '--'}}
            </el-form-item>
          </el-col>
        </div>
			</el-form>
		</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        loading: false,
        res: {
          city: {},
          province: {},
          user: {}
        },
        channelName: ''
      }
    },
    methods: {
      getOrderDetial () {
        let getOrder = () => {
          return this.$axios.get(this.$api.getCarSaleList, {params: {carId: this.$route.params.id}})
        }

        let getChannel = () => {
          return this.$axios.get(this.$api.channelList, {params: {marketId: this.$sess.get('userInfo').marketId, shopId: this.$sess.get('userInfo').shopId || '', channelState: 1}})
        }

        let getMortgageList = () => {
          return this.$axios.get(this.$api.getMortgageList)
        }

        let getInsurerList = () => {
          return this.$axios.get(this.$api.getInsurerList)
        }
        
        
        this.$axios.all([getOrder (), getChannel (), getMortgageList(), getInsurerList()]).then(axios.spread((res, channel, mort, insurer) => {
          this.res = res.data.result[0]
          let channelList = channel.data.result
          this.channelName = channelList.filter(item => item.channelId == this.res.channelId)
          this.channelName = this.channelName.length > 0 ? this.channelName[0].channelName : '--'

          let mortList = mort.data.result
          let morti = mortList.filter(item => item.mortgageId == this.res.saleMortgageName)
          this.res.saleMortgageName = morti.length > 0 ? morti[0].mortgageName : '--'

          let insurerList = insurer.data.result
          let insureri = insurerList.filter(item => item.insuranceId == this.res.saleInsuranceCompany)
          this.res.saleInsuranceCompany = insureri.length > 0 ? insureri[0].insuranceName : '--'

        }))
      }
    },
    activated () {
      this.getOrderDetial()
    }
  }

</script>

<style scoped>
.el-form-item{
  margin-bottom: 0;
}
</style>